<template>
	<view class="content">
		<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
			<!-- 背景图- 定位方式 -->
			<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: '100%' }"></image>
			<view class="content-box-loading" v-if="!loading"><u-loading mode="flower"></u-loading></view>
			<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`">
				<view class="message-item " :class="item.isItMe ? 'right' : 'left'">
					<image style="width: 80rpx;height: 80rpx;" class="img" :src="item.fromUserHeadImg" mode="heightFix" @tap="linkToBusinessCard(item.fromUserId)"></image>
					<!-- contentType = 1 文本 -->
					<view class="content" v-if="item.contentType == 1">{{ item.content }}</view>
					<!-- contentType = 2 语音 -->
					<view
						class="content contentType2"
						:class="[{ 'content-type-right': item.isItMe }]"
						v-if="item.contentType == 2"
						@tap="handleAudio(item)"
						hover-class="contentType2-hover-class"
						:style="{width:`${130+(item.contentDuration*2)}rpx`}"
					>
						<view
							class="voice_icon"
							:class="[
								{ voice_icon_right: item.isItMe },
								{ voice_icon_left: !item.isItMe },
								{ voice_icon_right_an: item.anmitionPlay && item.isItMe },
								{ voice_icon_left_an: item.anmitionPlay && !item.isItMe }
							]"
						></view>
						<view class="">{{ item.contentDuration }}''</view>
					</view>
					<!-- contentType = 3 图片 -->
					<view 
						class="content contentType3" 	
						v-if="item.contentType == 3"
						@tap="viewImg([item.content])"
					>
						<image :src="item.content" class="img" mode="widthFix"></image>
					</view>
				</view>
			</view> 
		</view>
		
		<!-- 底部聊天输入框 -->
		<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }">
			<view class="input-box-flex">
				<!-- #ifndef H5 -->
				<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/voice.png')"  @click="switchChatType('keyboard')"></image>
				<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/keyboard.png')"  @click="switchChatType('voice')"></image>
				<!-- #endif -->
				<view class="input-box-flex-grow"> 
					<input
						v-if="chatType === 'voice'"
						type="text"
						class="content"
						id="input"
						v-model="formData.content"
						:hold-keyboard="true"
						:confirm-type="'send'"
						:confirm-hold="true"
						placeholder-style="color:#DDDDDD;"
						:cursor-spacing="10"
						
					/>
					<view
						class="voice_title"
						v-if="chatType === 'keyboard'"
						:style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }"
						@touchstart.stop="startVoice"
						@touchmove.stop="moveVoice"
						@touchend.stop="endVoice"
						@touchcancel.stop="cancelVoice"
					>
						{{ voiceTitle }}
					</view>
				</view>
				<!-- 功能性按钮 -->
				<image class=" icon_btn_add" :src="require('@/static/add.png')" @tap="switchFun"></image>
				<button class="btn" size="mini" @tap="sendMsg(false)">发送</button>
			</view>
			
			<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
				<u-grid :col="4"  hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
					<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#eaeaea">
						<u-icon :name="item.icon" :size="52"></u-icon>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>

		</view>
		
		<!-- //语音动画 -->
		<view class="voice_an"  v-if="recording">
			<view class="voice_an_icon">
				<view id="one" class="wave"></view>
				<view id="two" class="wave"></view>
				<view id="three" class="wave"></view>
				<view id="four" class="wave"></view>
				<view id="five" class="wave"></view>
				<view id="six" class="wave"></view>
				<view id="seven" class="wave"></view>
			</view>
			<view class="text">{{voiceIconText}}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fromUserInfo: {},
			formData: {
				content: '',
				limit: 3,
				index: 1
			},
			msglength:0,
			isload:false,
			messageList: [],
			loading: true, //标识是否正在获取数据
			imgHeight: '1000px',
			mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
			chatType:"voice",  // 图标类型 'voice'语音 'keyboard'键盘
			voiceTitle: '按住 说话',
			Recorder: uni.getRecorderManager(),
			Audio: uni.createInnerAudioContext(),
			recording: false, //标识是否正在录音
			isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
			voiceInterval:null,
			voiceTime:0, //总共录音时长
			canSend:true, //是否可以发送
			PointY:0, //坐标位置
			voiceIconText:"正在录音...",
			showFunBtn:false, //是否展示功能型按钮
			AudioExam:null, //正在播放音频的实例
			funList: [
				{ icon:"photo-fill",title:"照片",uploadType:["album"] },
				{ icon:"camera-fill",title:"拍摄",uploadType:["camera"] },
			],
		};
	},
	watch:{
		messageList(a){
			if(this.msglength<a.length){
					setTimeout(()=>{
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
						});
					},100)
			}
			this.msglength = a.length;
		}
	},
	methods: {
		
		upimg(obj,func){
			// console.log(obj)
			var _this = this;
			uni.uploadFile({
			            url: this.url + '/setInsave', //仅为示例，非真实的接口地址
			            filePath: obj,
						file:[obj],
			            name: 'file',
			            formData: {
			                'user': 'test'
			            },
			            success: uploadFileRes => {
			                // console.log(uploadFileRes.data);
							// console.log(uploadFileRes)
							func(JSON.parse(uploadFileRes.data).lst);
			            }
			        });
		},
		//切换语音或者键盘方式
		switchChatType(type) {
			this.chatType = type;
			this.showFunBtn =false;
		},
		//切换功能性按钮
		switchFun(){
			this.chatType = 'voice'
			this.showFunBtn = !this.showFunBtn;
			uni.hideKeyboard()
		},
		//发送消息
		sendMsg(data) {
			// console.log(this._user_info)
			const params = {
				hasBeenSentId: Date.now(), //已发送过去消息的id
				content: this.formData.content,
				fromUserHeadImg: this._user_info.headImg, //用户头像
				fromUserId: this._user_info.userId,
				isItMe: true, //true此条信息是我发送的  false别人发送的
				createTime: Date.now(),
				contentType: 1
			};

			if (data) {
				if(data.contentType == 2){
					//说明是发送语音
					params.content = data.content;
					params.contentType = data.contentType;
					params.contentDuration = data.contentDuration;
					params.anmitionPlay = false;
				}else if(data.contentType == 3){
					//发送图片
					params.content = data.content;
					params.contentType = data.contentType;
				}
			} else if (!this.formData.content) {
				//验证输入框书否为空字符传
				return;
			}

			this.messageList.push(params);
			params.sendid = this.fromUserInfo.fromUserId;
			// params.sendid = this.;
			params.userName = this._user_info.userName;
			params.sendtime = new Date().getTime();
			uni.sendSocketMessage({
			      data: JSON.stringify(params)
			});
			// console.log(this.fromUserInfo.fromUserId + 'msg' + params.fromUserId,this.messageList)
			this.sodata[this.fromUserInfo.fromUserId + 'msg' + params.fromUserId] = this.messageList;
			// this.setcook(this.fromUserInfo.fromUserId + 'msg' + params.fromUserId,this.messageList);
			this.$u.vuex('sodata',this.sodata);
			this.setnowlist(params);
			// this.setcook(this.fromUserInfo.fromUserId + 'msg' + params.fromUserId,this.messageList);
			// console.log(this.getcook(this.fromUserInfo.fromUserId + 'msg' + params.fromUserId,this.messageList))
			this.formData.content = '';
			if(this.showFunBtn){
				// this.showFunBtn = false;
			};
			uni.pageScrollTo({
				scrollTop: 99999,
				duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
			});
			// this.$nextTick(() => {
			// 	this.formData.content = '';
			// 	// // #ifdef MP-WEIXIN
			// 	// 	if(params.contentType == 1){
			// 	// 		uni.pageScrollTo({
			// 	// 			scrollTop: 99999,
			// 	// 			duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
			// 	// 		});
			// 	// 	}else{
			// 	// 		setTimeout(()=>{
			// 	// 			uni.pageScrollTo({
			// 	// 				scrollTop: 99999,
			// 	// 				duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
			// 	// 			});
			// 	// 		},100)
			// 	// 	}
			// 	// // #endif
					
			// 	// // #ifndef MP-WEIXIN
			// 	// 	uni.pageScrollTo({
			// 	// 		scrollTop: 999999,
			// 	// 		duration: 10
			// 	// 	});
			// 	// // #endif
				
			// 	if(this.showFunBtn){
			// 		this.showFunBtn = false;
			// 	}
				
			// 	// // #ifdef MP-WEIXIN 
			// 	// if (params.contentType == 1) {
			// 	// 	this.mpInputMargin = true;
			// 	// } 
			// 	// // #endif
			// 	// //h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
			// 	// // #ifdef H5
			// 	// uni.hideKeyboard();
			// 	// // #endif
			// });
		},
		
		setnowlist(obj){
			// console.log(this.fromUserInfo.fromUserName)
			var _this= this;
			var data = {
				  content: obj.content,
				  HeadImg: _this.fromUserInfo.fromUserHeadImg,
				  userId: _this.fromUserInfo.fromUserId,
				  userName:_this.fromUserInfo.fromUserName,
				  show:false,
				  isTop: false,
				  contentType: obj.contentType,
				  sendtime: obj.sendtime,
				  num:0
			}
			var list = this.nowlist;
			for(var i in list){
				var o = list[i];
				// console.log(o.sendid == data.sendid)
				if(o.userId == data.userId){
					list.splice(i,1);
				};
			}
			list.unshift(data)
			this.$u.vuex('nowlist',list)
		},
		//用户触摸屏幕的时候隐藏键盘
		touchstart() {
			uni.hideKeyboard();
		},
		// userid 用户id
		linkToBusinessCard(userId) {
			this.$u.route({
				url: 'pages/businessCard/businessCard',
				params: {
					userId
				}
			});
		},
		//准备开始录音
		startVoice(e) {
			if(!this.Audio.paused){
				//如果音频正在播放 先暂停。
				this.stopAudio(this.AudioExam)
			}
			this.recording = true;
			this.isStopVoice = false;
			this.canSend = true;
			this.voiceIconText = "正在录音..."
			this.PointY = e.touches[0].clientY;
			this.Recorder.start({
				format: 'mp3'
			});
		},
		//录音已经开始
		beginVoice(){
			if (this.isStopVoice) {
				this.Recorder.stop();
				return;
			}
			this.voiceTitle = '松开 结束'
			this.voiceInterval =  setInterval(()=>{
				this.voiceTime ++;
			},1000)
		},
		//move 正在录音中
		moveVoice(e){
			const PointY = e.touches[0].clientY
			const slideY = this.PointY - PointY;
			if(slideY > uni.upx2px(120)){
				this.canSend = false;
				this.voiceIconText = '松开手指 取消发送 '
			}else if(slideY > uni.upx2px(60)){
				this.canSend = true;
				this.voiceIconText = '手指上滑 取消发送 '
			}else{
				this.voiceIconText = '正在录音... '
			}
		},
		//结束录音
		endVoice() {
			this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
			this.Recorder.stop();
			this.voiceTitle = '按住 说话'
		},
		//录音被打断
		cancelVoice(e){
			this.voiceTime = 0;
			this.voiceTitle = '按住 说话';
			this.canSend = false;
			this.Recorder.stop();
		},
		//处理录音文件
		handleRecorder({ tempFilePath,duration }) {
			let contentDuration;
			// #ifdef MP-WEIXIN
			this.voiceTime = 0;
			if (duration < 600) {
				this.voiceIconText="说话时间过短";
				setTimeout(()=>{
					this.recording = false;
				},200)
				return;
			} 
			contentDuration = duration/1000;
			// #endif
			
			// #ifdef APP-PLUS
			contentDuration = this.voiceTime +1;
			this.voiceTime = 0;
			if(contentDuration <= 0) {
				this.voiceIconText="说话时间过短";
				setTimeout(()=>{
					this.recording = false;
				},200)
				return;
			};
			// #endif
			
			this.recording = false;
			this.upimg(tempFilePath,(url)=>{
				const params = {
					contentType: 2,
					content: url,
					contentDuration: Math.ceil(contentDuration)
				};
				this.canSend && this.sendMsg(params);
			});
			
		},
		//控制播放还是暂停音频文件
		handleAudio(item) {
			this.AudioExam = item;
			this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
		},
		//播放音频
		playAudio(item) {
			this.Audio.src = item.content;
			this.Audio.hasBeenSentId = item.hasBeenSentId;
			this.Audio.play();
			item.anmitionPlay = true;
		},
		//停止音频
		stopAudio(item) {
			item.anmitionPlay = false;
			this.Audio.src = '';
			this.Audio.stop();
		},
		//关闭动画
		closeAnmition() {
			const hasBeenSentId = this.Audio.hasBeenSentId;
			const item = this.messageList.find(it => it.hasBeenSentId == hasBeenSentId);
			item.anmitionPlay = false;
		},
		//点击宫格时触发
		clickGrid(index){
			if(index == 0){
				this.chooseImage(['album'])
			}else if(index == 1){
				this.chooseImage(['camera'])
			}
		},
		//发送图片
		chooseImage(sourceType){
			var _this = this;
			uni.chooseImage({
				sourceType,
				sizeType:['compressed'], 
				success:res=>{ 
					this.showFunBtn = false;
					for(let i = 0;i<res.tempFilePaths.length;i++){
						_this.upimg(res.tempFilePaths[i],function(url){
							console.log(url)
							const params = {
								contentType: 3,
								content: url,
							};
							_this.sendMsg(params)
						});
						
					}
				}
			})
		},
		//查看大图
		viewImg(imgList){
			uni.previewImage({
				urls: imgList,
				// #ifndef MP-WEIXIN
				indicator: 'number'
				// #endif
			});
		},
	},
	onPageScroll(e) {
		// console.log(e)
		// if(!this.isload) return;
		if (e.scrollTop < 50) {
			// this.joinData();
		}
	},
	onNavigationBarButtonTap({ index }) {
		if (index == 0) {
			//用户详情 设置
		} else if (index == 1) {
			//返回按钮
			this.$u.route({
				type: 'switchTab',
				url: 'pages/home/home'
			});
		}
	},
	//返回按钮事件
	onBackPress(e) {
		//以下内容对h5不生效
		//--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
		this.$u.route({
			type: 'switchTab',
			url: 'pages/home/home'
		});
		return true;
	},
	// #ifdef H5
	destroyed() {
		// console.log(444)
		var list = this.nowlist;
		for(var i in list){
			var o = list[i];
			// console.log(o.userId , this.fromUserInfo.fromUserId)
			if(o.userId == this.fromUserInfo.fromUserId){
				o.num = 0;
			};
		}
		this.$u.vuex('nowlist',[])
		this.$u.vuex('nowlist',list)
	},
	// #endif
	onHide() {
		// console.log(123213)
		var list = this.nowlist;
		for(var i in list){
			var o = list[i];
			// console.log(o.userId , this.fromUserInfo.fromUserId)
			if(o.userId == this.fromUserInfo.fromUserId){
				o.num = 0;
			};
		}
		this.$u.vuex('nowlist',[])
		this.$u.vuex('nowlist',list)
	},
	onLoad(info) {
		// { messageId,fromUserName,fromUserHeadImg } = info
		const userInfo = this.firendList.filter(item => item.userId == info.fromUserId)[0];
		// console.log(userInfo.userId + 'msg' + this._user_info.userId)
		// var oldarr = this.setcook(userInfo.userId + 'msg' + this._user_info.userId,[]);
		var oldarr = this.getcook(userInfo.userId + 'msg' + this._user_info.userId);
		// console.log(oldarr)
		this.messageList = this.sodata[userInfo.userId + 'msg' + this._user_info.userId]?this.sodata[userInfo.userId + 'msg' + this._user_info.userId]:[];
		// console.log(userInfo.userName)
		this.msglength = this.messageList.length;
		this.fromUserInfo = {
			fromUserName: userInfo.userName,
			fromUserHeadImg: userInfo.headImg,
			fromUserId: userInfo.userId,
			messageId: info.messageId
		};
		
		
		
		//录音开始事件
		this.Recorder.onStart(e => {
			
			this.beginVoice();
		});
		//录音结束事件
		this.Recorder.onStop(res => {
			clearInterval(this.voiceInterval);
			this.handleRecorder(res);
		});

		//音频停止事件
		this.Audio.onStop(e => {
			this.closeAnmition();
		});

		//音频播放结束事件
		this.Audio.onEnded(e => {
			this.closeAnmition();
		});
		setTimeout(()=>{
			uni.pageScrollTo({
				scrollTop: 99999,
				duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
			});
		},100)
	},
	onReady() {
		// console.log(13	)
		//自定义返回按钮 因为原生的返回按钮不可阻止默认事件
		// #ifdef H5
		const icon = document.getElementsByClassName('uni-page-head-btn')[0];
		icon.style.display = 'none';
		// #endif

		uni.setNavigationBarTitle({
			title: this.fromUserInfo.fromUserName
		});
		// this.joinData();
		
		uni.getSystemInfo({
			success: res => {
				// this.imgHeight = res.windowHeight + 'px';
			}
		});
		
		uni.onKeyboardHeightChange(res => {
			if (res.height == 0) {
				// #ifdef MP-WEIXIN
				this.mpInputMargin = false;
				// #endif
			}else{
				this.showFunBtn = false;
			}
		});
	}
};
</script>

<style lang="scss" scoped>
 @import './index.scss'
</style>
